<template>
  <el-row :gutter="15" style="height: 100%;">
    <el-col :span="12" style="height: 100%;">
      <div class="flex" style="background-color: rgba(13, 35, 82, 0.49);border-radius: 4px; height: 100%;">
        <div style="width:40%;height: 100%;" v-if="pie_num > 0">
          <div :id="pieCharts" style="width:100%;height: 100%;"></div>
          <!-- <div v-else class="empty">暂无数据</div>v-if="pieData.length > 0" -->
        </div>
        <div :style="{ height: '100%', width: pie_num > 0 ? '60%' : '100%' }" v-if="showBarCharts">
          <!-- <Bar3d :id="chartId" :data="bar_data"></Bar3d> -->
          <!-- <div :id="chartId" style="width:100%; height: 100%" v-if="bar_data.y.length > 0"></div>
          <div v-else class="empty">暂无数据</div> -->
          <BarCharts :option="option" :chartId="chartId" :barChartsId="'bar' + chartId"></BarCharts>
        </div>
      </div>
    </el-col>
    <el-col :span="12" style="height: 100%;">
      <div class="table-class"
        style="background-color: rgba(13, 35, 82, 0.49); border-radius: 4px; height: 100%;  box-sizing: border-box;">
        <DexTable :config="tableConfig" :data="dailyTableData" :withPage="false" :header-cell-style="commonTableProps"
          height="100%">
          <template #reportName="scope">
            <div class="link" @click="toDaliyDetail(scope.row)">{{ scope.row.reportName }}</div>
          </template>
        </DexTable>
      </div>
    </el-col>
    <LsdDialog :dialogConfig="previewDialog" @close="closePreviewDialog">
      <template slot="dialog">
        <component :is="widgetType" :previewData="previewData" :dutyType="previewType" />
      </template>
    </LsdDialog>
  </el-row>
</template>
<script>
import BarCharts from "@/components/highCharts/NewBarCharts.vue";
import DexTable from "@/components/DexTable.vue";
import { dailyConfig } from "../confing.js";
import DailyPreviewDialog from "../../Daily/DailyDuty/dutyLeft/previewDialog.vue"; // 日常
import EmergencyPreviewDialog from "../../Emergency/EmergencyDuty/dutyLeft/previewDialog.vue"; // 应急
import { getDetail } from "@/api/duty/daily/plan.js";
import { getExistingNum, getAddNum } from "../../Daily/DailyDuty/dutyRinght/confin";
export default {
  props: {
    type: {
      type: String,
      default: ""
    },
    chartsOption: {
      type: Object,
      default: () => {
        return {};
      }
    },
    bar_data: {
      type: Array,
      default: () => []
    },
    chartId: {
      type: String,
      default: ""
    },
    barChartsId: {
      type: String,
      default: ""
    },
    pieCharts: {
      type: String,
      default: ""
    },
    pieData: {
      type: Array,
      default: () => []
    },
    dailyTableData: {
      type: Array,
      default: () => []
    }
  },
  components: {
    DexTable,
    DailyPreviewDialog,
    EmergencyPreviewDialog,
    BarCharts
  },
  data() {
    return {
      tableConfig: [],
      pie_data: [],
      pie_num: 0,
      commonTableProps: {
        "backgroundColor": "#193F8E",
        "color": "#fff"
      },
      previewDialog: { // 预览弹窗
        title: "值班日报",
        isShow: false
      },
      widgetType: "DailyPreviewDialog",
      previewData: {},
      previewType: "",
      option: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "78%",
        bdHeight: "12%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["未报", "已报"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      showBarCharts: false
    };
  },
  watch: {
    // bar_data: {
    //   handler(val) {
    //     const xAxis = [];
    //     const series = [];
    //     val.forEach(item => {
    //       xAxis.push(item.unit);
    //       series.push([item.notReported, item.registered]);
    //     });
    //     this.$nextTick(() => {
    //       this.option.xAxis[0].data = xAxis;
    //       this.option.series = series;
    //       this.showBarCharts = true;
    //     });
    //   },
    //   deep: true,
    //   immediate: false
    // },
    pieData: {
      handler(val) {
        this.showBarCharts = false;
        if (val) {
          let notReported = 0;
          let registered = 0;
          const xAxis = [];
          const series = [];
          val.forEach(item => {
            notReported += item.notReported * 1;
            registered += item.registered * 1;
            xAxis.push(item.unit);
            series.push([item.notReported, item.registered]);
          });
          this.pie_data = [{
            color: "#168BF2",
            name: "已报",
            y: registered
          },
          {
            color: "#F4936A",
            name: "未报",
            y: notReported
          }];
          this.pie_num = notReported + registered;
          this.$nextTick(() => {
            this.showBarCharts = true;
            this.$nextTick(() => {
              if (this.pie_num > 0) this.initPie();
              this.option.xAxis[0].data = xAxis;
              this.option.series = series;
            });
          });
        }
      },
      deep: true
    }
    // pieData(val) {
    //   this.showBarCharts = false;
    //   if (val) {
    //     let notReported = 0;
    //     let registered = 0;
    //     const xAxis = [];
    //     const series = [];
    //     val.forEach(item => {
    //       notReported += item.notReported * 1;
    //       registered += item.registered * 1;
    //       xAxis.push(item.unit);
    //       series.push([item.notReported, item.registered]);
    //     });
    //     this.pie_data = [{
    //       color: "#168BF2",
    //       name: "已报",
    //       y: registered
    //     },
    //     {
    //       color: "#F4936A",
    //       name: "未报",
    //       y: notReported
    //     }];
    //     this.pie_num = notReported + registered;
    //     this.$nextTick(() => {
    //       if (this.pie_num > 0) this.initPie();
    //       this.option.xAxis[0].data = xAxis;
    //       this.option.series = series;
    //     });
    //   }
    // }
  },
  mounted() {
    this.tableConfig = JSON.parse(JSON.stringify(dailyConfig));
    this.tableConfig[0].label = this.type + "名称";
  },
  methods: {
    initPie() {
      this.$Highcharts.chart(this.pieCharts, {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          itemDistance: 20, // 距离
          symbolWidth: 12, // 设置为正方形
          symbolHeight: 12,
          symbolRadius: 0,
          x: 0,
          y: 10,
          itemStyle: {
            color: "#fff"
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 40,
            size: 160,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            innerSize: "60%",
            startAngle: -30, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.pie_data
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 32px;font-weight:bold;color:#fff">${this.getTotal(this.pie_data)}</span><br/><span style="font-size: 18px;color:#fff">${this.type}</span>`,
          x: 0,
          y: 80
        },
        title: {
          text: this.type,
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#5EE855", "#EEEA71", "#4FD2FD"]
      });
    },
    // initPie() {
    //   this.$Highcharts.chart(this.pieCharts, {
    //     chart: {
    //       type: "pie",
    //       backgroundColor: "rgba(0,0,0,0)",
    //       marginLeft: 10,
    //       options3d: {
    //         enabled: true,
    //         alpha: 55,
    //         beta: 0
    //       }
    //     },
    //     title: {
    //       text: ""
    //     },
    //     credits: {
    //       enabled: false
    //     },
    //     tooltip: {
    //       trigger: "item",
    //       backgroundColor: "rgba(0,24,34,0.25)",
    //       borderWidth: 0,
    //       shadow: false,
    //       textStyle: {
    //         color: "#fff"
    //       },
    //       shared: true,
    //       formatter() {
    //         if (this.point.name === "00") return "";
    //         return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
    //       }
    //     },
    //     legend: {
    //       verticalAlign: "top",
    //       symbolWidth: 14,
    //       symbolHeight: 12,
    //       symbolRadius: 4,
    //       x: 0,
    //       layout: "horizontal",
    //       align: "center",
    //       itemMarginTop: 3,
    //       itemStyle: {
    //         fontSize: "12px",
    //         color: "#fff",
    //         fontWeight: 100
    //       },
    //       itemHoverStyle: {
    //         color: "#fff"
    //       },
    //       labelFormatter: function () {
    //         if (this.name === "00") return;
    //         return `<span style="margin:0 10px">${this.name}</span>`;
    //       }
    //     },
    //     plotOptions: {
    //       pie: {
    //         allowPointSelect: true,
    //         cursor: "pointer",
    //         // innerSize: "50%",
    //         depth: 35,
    //         dataLabels: {
    //           enabled: false,
    //           formatter() {
    //             if (this.point.name !== "00") {
    //               return `<span style="font-size: 16px;color:#fff">${this.point.name}</span><br/><span style="font-size: 16px;color:#fff">${this.point.y}篇</span>`;
    //             } else {
    //               return "";
    //             }
    //           }
    //         },
    //         showInLegend: true
    //       }
    //     },
    //     series: [{
    //       type: "pie",
    //       size: "160%",
    //       center: ["50%", "50%"],
    //       data: this.pieData
    //     }]
    //   });
    // },
    // initBar() {
    //   const chartDom = this.$echarts.init(document.getElementById(this.chartId));
    //   const data1 = this.bar_data.y;
    //   const name = this.type;
    //   chartDom.setOption(
    //     {
    //       tooltip: {
    //         trigger: "item",
    //         axisPointer: {
    //           type: "shadow"
    //         },
    //         backgroundColor: "rgba(0,24,34,0.25)",
    //         borderWidth: 0,
    //         textStyle: {
    //           color: "#fff"
    //         },
    //         formatter(params) {
    //           const finishedCount = data1[params.dataIndex];
    //           return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
    //           <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #5cbcff;border-radius: 50%;margin-right: 10px'></div>${name}: ${finishedCount}</div>`;
    //         }
    //       },
    //       grid: {
    //         top: "8%",
    //         right: "0%",
    //         bottom: "15%",
    //         left: "10%"
    //       },
    //       xAxis: {
    //         data: this.bar_data.x,
    //         axisTick: {
    //           show: false
    //         },
    //         axisLine: {
    //           lineStyle: {
    //             color: "#22588F"
    //           }
    //         },
    //         axisLabel: {
    //           textStyle: {
    //             // color: "#9ed2f9"
    //             color: "#fff"
    //           },
    //           formatter: function (params) {
    //             var newParamsName = "";
    //             var paramsNameNumber = params.length;
    //             var provideNumber = 6;// 一行显示几个字 然后就超过字数就会自动换行
    //             if ((paramsNameNumber / 6) > 6) {
    //               provideNumber = 6;
    //             }
    //             var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
    //             if (paramsNameNumber > provideNumber) {
    //               for (var p = 0; p < rowNumber; p++) {
    //                 var tempStr = "";
    //                 var start = p * provideNumber;
    //                 var end = start + provideNumber;
    //                 if (p == rowNumber - 1) {
    //                   tempStr = params.substring(start, paramsNameNumber);
    //                 } else {
    //                   tempStr = params.substring(start, end) + "\n";
    //                 }
    //                 newParamsName += tempStr;
    //               }
    //             } else {
    //               newParamsName = params;
    //             }
    //             return newParamsName;
    //           }
    //         }
    //       },
    //       yAxis: [
    //         {
    //           splitNumber: 2,
    //           // name: "日报",
    //           nameTextStyle: {
    //             color: "#fff",
    //             aligh: "left"
    //           },
    //           splitLine: {
    //             lineStyle: {
    //               width: 1,
    //               color: ["#666"],
    //               type: "dashed"
    //             }
    //           },
    //           axisLabel: {
    //             show: true,
    //             textStyle: {
    //               color: "#fff"
    //             }
    //           }
    //         }
    //       ],
    //       series: [
    //         {
    //           data: this.bar_data.y,
    //           type: "bar",
    //           stack: "plan",
    //           barWidth: 20,
    //           itemStyle: {
    //             color: {
    //               x: 0,
    //               y: 0,
    //               x2: 0,
    //               y2: 1,
    //               type: "linear",
    //               global: false,
    //               colorStops: [
    //                 {
    //                   offset: 0,
    //                   color: "#278dec"
    //                 },
    //                 {
    //                   offset: 1,
    //                   color: "#5cbcff"
    //                 }
    //               ]
    //             }
    //           }
    //         },
    //         {
    //           data: [0, 0, 0, 0],
    //           type: "pictorialBar",
    //           symbol: "diamond",
    //           symbolOffset: [0, "50%"],
    //           symbolSize: [20, 10],
    //           zlevel: 2,
    //           itemStyle: {
    //             normal: {
    //               color: "#5cbcff"
    //             }
    //           }
    //         },
    //         {
    //           data: this.bar_data.y,
    //           type: "pictorialBar",
    //           symbol: "diamond",
    //           symbolPosition: "end",
    //           symbolOffset: [0, "-50%"],
    //           symbolSize: [20, 10],
    //           zlevel: 2,
    //           itemStyle: {
    //             normal: {
    //               color: {
    //                 colorStops: [
    //                   {
    //                     offset: 0,
    //                     color: "#278dec"
    //                   },
    //                   {
    //                     offset: 1,
    //                     color: "#5cbcff"
    //                   }
    //                 ]
    //               }
    //             }
    //           }
    //         }
    //       ]
    //     }
    //   );
    //   chartDom.off("click");
    //   chartDom.on("click", (params) => {
    //     this.clickBar(params.dataIndex);
    //   });
    // },
    clickBar(index) {
      this.$emit("clickBar", this.bar_data.x[index]);
    },
    // 跳转日报详情
    async toDaliyDetail(row) {
      if (row.dutyType == 1) { // 日常值班
        this.widgetType = "DailyPreviewDialog";
        this.previewType = row.type == 1 ? "DutyLog" : "DutyDaily";
        this.previewDialog.title = row.type == 1 ? "值班日志" : "值班日报";
        this.previewData = await this.getDetail({ userId: row.creatorId, reportDate: row.dutyDate, type: row.type, dutyType: "1" });
      } else { // 应急
        this.widgetType = "EmergencyPreviewDialog";
        this.previewType = row.dutyReportType;
        this.previewDialog.title = "值班日志";
        this.previewData = await this.getDetail({ userId: row.creatorId, reportDate: row.dutyDate, type: row.type, dutyType: "2" });
      }
      this.previewDialog.isShow = true;

    },
    async getDetail(data) {
      const res = await getDetail(data);
      if (res) {
        if (data.dutyType == 1) {
          res?.dutyDailyDrillList.forEach((item, i) => {
            item.index = i + 1;
          });
          res?.dutyDailyResourceList.forEach((item, i) => {
            item.index = i + 1;
          });
          res.dutyDailyInfectionStatusList ? res?.dutyDailyInfectionStatusList.forEach((item, i) => {
            item.marketingExistingDiagnosis = getExistingNum(item);
            item.marketingExistingSuspected = getAddNum(item);
          }) : [];
        }
        //  else {
        //   res?.dutyEmergencyStopStatisticsList.forEach((item, i) => {
        //     item.index = i + 1;
        //   });
        // }
        return res;
      }
    },
    // 预览弹窗关闭
    closePreviewDialog() {
      this.previewDialog.isShow = false;
      this.previewData = {};
    },
    getTotal(list) {
      let num = 0;
      list.forEach(el => {
        num += el.y;
      });
      return num;
    }
  }
};
</script>
<style lang="less" scoped>
.link {
  color: #008dff;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}

.empty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #909399;
}

.table-class {
  :deep(.el-table) {
    background-color: transparent;
    color: #fff;
    border-bottom: 1px solid #22588f;

    &::before,
    &::after {
      background-color: #22588f;
    }

    // &::after {
    //   width: 0;
    // }

    tr {
      background-color: transparent;
    }

    th.el-table__cell {
      background-color: #193f8e;
      padding: 12px 0;

      &.is-leaf {
        border-bottom: 1px solid #22588f;
      }
    }

    td.el-table__cell {
      border-bottom: 1px solid #22588f;
      padding: 12px 0;
    }
  }

  :deep(.el-table__body) {
    box-sizing: border-box;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent;
  }

  :deep(.el-table--border) {
    border-color: #22588f;

    .el-table__cell {
      border-right: 1px solid #22588f;
    }
  }

  :deep(div::-webkit-scrollbar-track) {
    background: transparent;
  }

  :deep(.has-gutter) {
    th:last-child {
      display: none;
    }
  }

  :deep(.el-table__empty-block) {
    border-right: 1px solid #22588f;
    box-sizing: border-box;
  }
}
</style>
